<!--
 * @Author: 梁卓
 * @Date: 2022-02-11 21:22:12
 * @LastEditTime: 2022-02-13 23:28:03
 * @LastEditors: Please set LastEditors
 * @Description: 入党积极分子学习情况展示
 * @FilePath: \dreamUi\src\views\activist\score.vue
-->
<template>
    <div>
      <!-- 头部表格 -->
      <div>
        <el-card class="score_top">
          <div>
            <HonorEcharts/>
          </div>
          <div>
            <StudyScore/>
          </div>
        </el-card>
      </div> 
      <el-divider></el-divider>
      <div style = "width: 100%; height: 30px; margin-top: 20px;">
        <el-card>
          <el-row>
            <el-col :span="6">
              <el-input placeholder="请输要查询的学生姓名" v-model="queryInfo.queryString" clearable @clear="getPageInfo"/>
            </el-col>
            <el-col :span="4">
                <el-select v-model="semester" placeholder="请选择学期">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.semester"
                    :value="item.semester">
                  </el-option>
                </el-select>
            </el-col>
            <el-col :span="1.5" >
              <el-button type="primary" @click="getPageInfo">搜索学生</el-button>
            </el-col>
          </el-row>
          <el-table :data="tableData" border style="width: 100%;margin-bottom: 20px;">
            <el-table-column fixed prop="userName" label="姓名"  />
            <el-table-column fixed prop="semester" label="学期"  />
            <el-table-column fixed prop="averageScore" label="平均绩点" />
            <el-table-column fixed prop="ranking" label="班级排名"  />
            <el-table-column fixed prop="honerScore" label="荣誉积分" />
            <el-table-column fixed prop="studyScore" label="学习积分" />
          </el-table>
            <el-pagination
              v-if="total > 0"
              :currentPage="queryInfo.currentPage"
              :page-sizes="[8,15,30,50]"
              :page-size= "queryInfo.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total= total
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </el-card>
      </div>
    </div>
</template>

<script>
import store from '@/store';
import HonorEcharts from '@/componets/echarts/HonorScore'
import StudyScore from '@/componets/echarts/StudyScore'
export default {
  name: 'Score',
  components: {HonorEcharts,StudyScore},
  data() {
    return {
      // 分页
      queryInfo: {
        pageNumber: 1,
        pageSize: 8,
        queryString: ''
      },
      total: 0,
      // 学期
      semester: '2020-2021',
      tableData: [],
      value: '',
      options: []
    };
  },

  mounted() {
    this.getPageInfo()
    this.getAllSemester()
  },
  create() {

  },
  methods: {
    // 获取所有信息
    getPageInfo() {
      this.$ajax.post(`/semesterScore/findPage/${this.semester}`,this.queryInfo).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      });
    },
    // 获取学期信息
    getAllSemester() {
      this.$ajax.get('/semesterScore/getAllSemester').then(res => {
        this.options = res.data.data
      })
    },
    // 改变页码
    handleSizeChange(param) {
      this.queryInfo.pageSize = param;
      // 重新赋值
      this.getPageInfo();
    },
    // 改变当前的页面
    handleCurrentChange(param) {
      this.queryInfo.pageNumber = param;
      this.getPageInfo();
    },
  },
};
</script>

<style  scoped>
.score {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: -10px;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.score_top div{
  float: left;
  margin-left: 30px;
  width: 580px;
  height: 400px;
}
</style>